<template>
	<view>
		<!-- 分类标签 -->
		<view style=" display: flex; flex-wrap: wrap;margin: 30rpx 10rpx 10rpx 10rpx;">
			<view class="cate-text-item" v-for="(item,index) in categoryName" :key="index"
				@click="selectCategoryAction(item,index)">
				<view style="position:relative;" v-if="index == selectCate">
					<text style="color: #F26F9B;">{{item.classify}}</text>
					<view style="background-color: #F26F9B;height: 5rpx;width: auto;top: 10rpx;">
					</view>
				</view>
				<view style="position:relative;" v-else>
					<text style="color: #333333;">{{item.classify}}</text>
				</view>
			</view>
		</view>
		<view style="height: 0.5rpx;width: 100%; background-color: #CECECE;"></view>

		<!-- 筛选条件 -->
		<view style=" display: flex; flex-wrap: wrap;margin: 20rpx 10rpx 10rpx 10rpx;">
			<view class="cate-text-item" v-for="(item,index) in shaixuan" :key="index"
				@click="selectSaixuanAction(item,index)">
				<view style="position:relative;" v-if="index == selectSx">
					<text style="color: #F26F9B;">{{item.classify}}</text>

				</view>
				<view style="position:relative;" v-else>
					<text style="color: #333333;">{{item.classify}}</text>
				</view>
			</view>
		</view>
		<!-- 剧列表 -->
		<view style=" display: flex; flex-wrap: wrap;margin: -15rpx 10rpx 10rpx 10rpx;">
			<view class="video-bd-item" v-for="(item,index) in tvList" :key="index" @click="toVideoDetail(item)">
				<view style="position:relative;">
					<image class="video-bd-pic" :src="item.tv_image" mode="aspectFill"></image>
					<text class="tagcss-bd" :style="{backgroundColor: item.tag_color,}">{{item.tv_class}}</text>
					<text class="text-all_series">共{{item.all_series}}集</text>
				</view>

				<view class=" uni-flex uni-center">
					<text
						style="color: #333333;font-size: 26rpx;align-content: center; width: 210rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
						{{item.tv_name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const _ = db.command;
	export default {
		data() {
			return {
				categoryName: [],
				selectCate: 0, // 选中的分类
				selectSx: 0, // 选中的筛选
				shaixuan: [{
					"classify": "最热",
					"id": "_add_time"
				}, {
					"classify": "点赞最多",
					"id": "all_like"
				}, {
					"classify": "口碑最好",
					"id": "update_witch"
				}, {
					"classify": "好友推荐",
					"id": "sort"
				}],
				tvList: [], // 返回的数据
			};
		},
		async onLoad(options) {
			var that = this
			vk.callFunction({
				url: 'client/pages/pub/categoryName',
				success: (data) => {

					that.categoryName = data.videoList;
					that.categoryName.unshift({
						"_id": "0",
						"classify": "全部"
					})
					that.getTVlist()
				}
			});
		},
		methods: {
			//  选择分类
			selectCategoryAction(item, index) {
				this.selectCate = index
				this.getTVlist()
			},
			// 选择筛选条件
			selectSaixuanAction(item, index) {
				this.selectSx = index
				this.getTVlist()
			},
			// 根据条件获取列表
			getTVlist() {
				let category = this.categoryName[this.selectCate].classify
				let type = this.shaixuan[this.selectSx].id
				var that = this;
				console.log('select category ', category, type)
				vk.callFunction({
					url: 'client/pages/pub/tv_categoryList',
					loading: false, //静默登录，不显示loading
					data: {
						appid: vk.vuex.get('$app.appid'),
						// page: that.page,
						category: category,
						type: type
					},
					success: (data) => {
						that.tvList = data.tvList;
					}
				});
			},
			async toVideoDetail(item) {
				if (item.tv_id) {
					const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
					item = tvinfo.result.data[0]
				}
				vk.vuex.set('$app.currenttv', item)
				uni.navigateTo({
					url: '/pages/player/player?tv_id=' + item._id + "&series=" + item.series,
				})
			},
		}
	}
</script>

<style>
	.cate-text-item {
		margin: 10rpx 30rpx 10rpx 30rpx;
		width: auto;
	}

	.video-bd-item {
		margin: 10rpx;
		/* box-shadow: 0 4rpx 8rpx 0 rgba(121, 121, 121, 0.2);     */
		border-radius: 0 0 10rpx 10rpx;
		width: 222rpx;
	}

	.video-bd-pic {
		width: 100%;
		height: 280rpx;
		border-radius: 10rpx;
	}

	.tagcss-bd {
		font-size: 20rpx;
		color: #fff;
		padding: 1rpx 10rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
		position: absolute;
		left: 5rpx;
		bottom: 15rpx;
	}

	.text-all_series {
		font-size: 20rpx;
		color: #fff;
		padding: 1rpx 10rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
		position: absolute;
		right: 5rpx;
		bottom: 15rpx;
	}
</style>
